<template>
  <el-dialog v-model="dialog.visible" :title="title" width="30%" @close="handleCloseDialog">
    <div class="form-container">
      <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-width="100"
        class="form mb-0"
      >
        <el-form-item label="标题" prop="title">
          <el-input v-model.trim="formData.title" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="图片" prop="imageUrl">
          <SingleImageUpload v-model="formData.imageUrl"></SingleImageUpload>
        </el-form-item>
        <el-form-item label="跳转地址" prop="linkUrl">
          <el-input
            v-model.trim="formData.linkUrl"
            placeholder="请输入跳转地址如 http://www.baidu.com"
          />
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input
            v-model.number.trim="formData.sort"
            placeholder="请输入排序"
            class="!w-[150px]"
          />
        </el-form-item>
        <el-form-item label="启用/禁用" prop="status">
          <el-select v-model="formData.status" placeholder="请选择" clearable class="!w-[150px]">
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model.trim="formData.remark" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
        <el-button @click="handleCloseDialog">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ElMessage } from "element-plus";
import bannerApi, { SysBannerForm } from "@/api/mall/banner-api";
import { getLabelValueList } from "@/utils/enums";
import { ENABLE_STATUS_ENUM } from "@/enums/brand/BrandEnum";
const emit = defineEmits(["update:modelValue", "loadData"]);
const dialog = reactive({
  title: "",
  visible: false,
});
/*基础信息*/
const formRef = ref();
const statusList = getLabelValueList(ENABLE_STATUS_ENUM);
const title = computed(() => (formData.value.id ? "编辑" : "新增"));
const defaultFormData: SysBannerForm = {
  id: undefined,
  status: ENABLE_STATUS_ENUM.ENABLED.value,
  imageUrl: "",
  linkUrl: "",
  remark: "",
  title: "",
};
const formData = ref({
  ...defaultFormData,
});
const formRules = reactive({
  linkUrl: [{ required: true, message: "请输入跳转 URL", trigger: "blur" }],
  title: [{ required: true, message: "请输入标题", trigger: "blur" }],
  imageUrl: [{ required: true, message: "请上传图片", trigger: "blur" }],
  sort: [
    { type: "number", message: "格式错误", trigger: "blur" },
    { type: "number", required: true, message: "请输入排序", trigger: "blur" },
  ],
});

async function handleSubmit() {
  const validate = await formRef.value.validate();
  if (!validate) return;
  try {
    if (formData.value.id) {
      await bannerApi.update(formData.value.id, formData.value);
    } else {
      await bannerApi.add(formData.value);
    }
    ElMessage.success("成功");
    emit("loadData");
    handleCloseDialog();
  } catch (error) {
    console.log("error", error);
  }
}

// 关闭弹窗
function handleCloseDialog() {
  formData.value = {};
  Object.assign(formData.value, defaultFormData);
  dialog.visible = false;
  emit("update:modelValue", false); // 关闭弹窗
}

function showModal(val) {
  dialog.visible = true;
  if (!val) return;
  getBanner(val.id);
}

async function getBanner(id: number) {
  try {
    const data: any = await bannerApi.getById(id);
    formData.value = { ...formData.value, ...data.data };
  } catch (e) {
    console.log(e);
  } finally {
  }
}

defineExpose({
  showModal,
});
</script>
<style style="scss" scoped>
.form-container {
  height: 500px;
  overflow: auto;
}
.form {
  ::v-deep(.el-form-item) {
    margin-bottom: 0;
  }
}
</style>
